<!-- Copyright (c) 2022 渝州大数据实验室
 *
 * Lanius is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 *
 *     http://license.coscl.org.cn/MulanPSL2
 *
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
-->
<!-- 
* @desc:任务编排数据列表组件
* @fileName:ArrangementDetails.vue
* @author:chenxiaofeng@yzbdl.ac.cn
* @date:2022-4-8
!-->
<script setup lang="ts">
import { getCurrentInstance, ref } from "vue";
import { showSuccessMessage, showErrorMessage } from "@/common/message";
const { proxy } = getCurrentInstance() as any;

const props = defineProps({
  // 表格数据
  tableData: Array as any,
  // 列表加载动画标识
  isListLoading: {
    type: Boolean,
    default: false,
  },
  //删除方法
  delArrangementFunc: Function as any,
  //弹窗回调
  dialogEditFunc: Function as any,
  // 加载列表方法
  reqTableList: Function as any,
  // 页面初次加载
  isPageLoading: Boolean,
});

// 定义修改状态的加载变量
const switchLoading = ref(false);
// 定义编辑确认框
const editPopover: any = ref(null);

/**
 * 点击修改图标
 * @param currentInfo 当前行数据
 * @reture viod
 */
const editArrangement = (currentInfo: any) => {
  if (currentInfo.status === 2) {
    currentInfo.updateConfirmSelected = true;
  } else {
    props.dialogEditFunc(currentInfo);
  }
};

/**
 * 点击删除图标
 * @param currentInfo 当前行数据
 * @reture viod
 */
const delArrangement = (currentInfo: any) => {
  currentInfo.deleteConfirmSelected = false;
  props.delArrangementFunc(currentInfo.id);
};

/**
 * 改变状态方法
 * @param v 改变状态的值
 * @param r 当前行数据
 * @reture viod
 */
const changeStatus = (v: any, r: any) => {
  let msg: string = "";
  if (v === 2) {
    msg = "启用成功";
  } else {
    msg = "禁用成功";
  }
  switchLoading.value = true;
  const res = proxy.$HTTP.put({
    url: `/task/plan/taskStatus/` + r.id + "/" + v,
  });
  res
    .then((res: any) => {
      if (res.code === 200) {
        showSuccessMessage({
          message: msg,
        });
        props.reqTableList();
        switchLoading.value = false;
        r.statusConfirmSelected = false;
        if (v === 1) r.status = false;
      }
    })
    .catch((response: any) => {
      showErrorMessage({ message: response.data });
      props.reqTableList();
      r.statusConfirmSelected = false;
      switchLoading.value = false;
    });
};

/**
 * 点击切换状态切换
 * @param v 改变状态的值
 * @param r 当前行数据
 * @reture viod
 */
const onClickStatus = (v: any, r: any) => {
  changeStatus(v, r);
};

/**
 * 点击手动执行
 * @param currentInfo 改变状态的值
 * @reture viod
 */
const onRunArrangement = (currentInfo: any) => {
  const res = proxy.$HTTP.get({
    url: `/task/plan/executeNow/` + currentInfo.id,
  });
  res
    .then((res: any) => {
      if (res.code === 200) {
        showSuccessMessage({
          message: "执行成功！",
        });
      }
    })
    .catch((response: any) => {
      showErrorMessage({ message: response.data });
    });
};

/**
 * 关闭编辑确认框
 * @reture viod
 */
const closeEditPopover = () => {
  editPopover.value.hide();
};
</script>

<template>
  <div class="page-details">
    <el-table
      v-loading="props.isListLoading"
      :data="props.tableData"
      stripe
      style="width: 100%"
    >
      <el-table-column
        prop="taskName"
        label="任务名称"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="serverProgramName"
        label="服务节点"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="taskResourceName"
        label="资源名称"
        :show-overflow-tooltip="true"
      />
      <el-table-column prop="taskCronDes" label="执行周期">
        <template #default="scope">
          <div>
            <el-tooltip
              class="box-item"
              effect="dark"
              :content="scope.row.taskCron"
              placement="top"
            >
              {{ scope.row.taskCronDes }}
            </el-tooltip>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态">
        <template #default="scope">
          <!-- 1是禁用inactive-value，2是启用active-value -->
          <el-switch
            @change="onClickStatus($event, scope.row)"
            :value="scope.row.status"
            :inactive-value="1"
            :loading="switchLoading"
            :active-value="2"
            inactive-color="#ccc"
            active-color="#55d66b"
          />
        </template>
      </el-table-column>
      <el-table-column prop="operation" label="操作" fixed="right" width="180">
        <template #default="scope">
          <lanius-tooltip content="编辑">
            <span class="operation">
              <img
                v-show="scope.row.status === 1"
                @click="editArrangement(scope.row)"
                src="@/assets/img/common/edit.png"
              />
              <el-popover
                popper-class="error-popper"
                placement="top"
                trigger="click"
                ref="editPopover"
                effect="dark"
                :width="360"
              >
                <template #reference>
                  <img
                    v-show="scope.row.status === 2"
                    src="@/assets/img/common/edit.png"
                  />
                </template>
                <div class="custom-popover">
                  <div class="custom-popover-title">
                    <img src="@/assets/img/common/warning.png" />无法编辑
                  </div>
                  <div class="custom-popover-content">
                    请将任务状态变更为禁用后，再来进行该操作！
                  </div>
                  <div class="custom-popover-button">
                    <el-button @click="closeEditPopover" size="small"
                      >关闭</el-button
                    >
                  </div>
                </div>
              </el-popover>
            </span>
          </lanius-tooltip>
          <span class="operation">
            <lanius-tooltip content="手动执行">
              <img
                class="run"
                @click="onRunArrangement(scope.row)"
                src="@/assets/img/task-resource/run.png" /></lanius-tooltip
          ></span>
          <span class="operation">
            <lanius-pop-confirm
              title="删除提示"
              :content="'确定删除任务?'"
              @confirm="delArrangement(scope.row)"
            >
              <div style="display: inline">
                <lanius-tooltip content="删除">
                  <img src="@/assets/img/common/delete.png" />
                </lanius-tooltip>
              </div>
            </lanius-pop-confirm>
          </span>
        </template>
      </el-table-column>
      <template v-slot:empty>
        <el-empty description="暂无数据" />
      </template>
    </el-table>
  </div>
</template>

<style>
.error-popper {
  background-color: rgba(232, 90, 90, 0.9) !important;
  height: 94px !important;
  border-radius: 0 !important;
  border: 0 !important;
}
.error-popper .custom-popover + .el-popper__arrow::before {
  background-color: rgba(232, 90, 90, 0.9) !important;
  border: none !important;
}
</style>
<style scoped lang="scss">
.operation {
  padding: 0 5px;
  img {
    width: 16px;
    height: 16px;
    cursor: pointer;
  }
  .run {
    width: 22px;
    height: 16px;
  }
}
.page-details {
  padding-left: 35px;
}
.el-table {
  :deep(th) {
    background-color: #fafafa;
    height: 40px;
    line-height: 40px;
    padding: 0;
    border-bottom: 0 !important;
    &:first-child {
      padding-left: 40px;
    }
  }
  :deep(td) {
    height: 40px;
    line-height: 40px;
    padding: 0;
    border-bottom: 0 !important;
    &:first-child {
      padding-left: 40px;
    }
  }
  :deep(.el-table__row--striped) {
    td {
      background-color: rgba($color: #f6f6f6, $alpha: 0.56) !important;
    }
  }
  :deep(.el-table__inner-wrapper) {
    &::before {
      height: 0;
    }
  }
}
</style>
